<template>
  <view v-if="!loading">
    <view>
      <u-tabs-swiper
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        swiperWidth="750"
      ></u-tabs-swiper>
    </view>
    <swiper
      :class="[
        'swiper',
        {
          noButton: !taskInfo.approvalPermission,
        },
      ]"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <scroll-view
          scroll-y
          class="content-page"
          :style="`width: 100%`"
          @scrolltolower="onreachBottom"
        >
          <payRegisterFormInfo
            v-if="
              list[swiperCurrent].name === '经费入账' && swiperCurrent === index
            "
            :taskInfo="taskInfo"
            :projectInfo="projectInfo"
            :formInfoData="formInfoData"
          ></payRegisterFormInfo>
          <payCostDetail
            v-if="
              list[swiperCurrent].name === '费用明细' && swiperCurrent === index
            "
            :paymentRegistId="payRegisterInfo.taskId"
          ></payCostDetail>
          <fileList
            :taskInfo="{
              taskId: payRegisterInfo.taskId,
              isCommonDetail: true,
            }"
            v-if="
              list[swiperCurrent].name === '文件清单' && swiperCurrent === index
            "
          ></fileList>
        </scroll-view>
      </swiper-item>
    </swiper>
    <!-- TODO: 添加审批权限 -->
    <view
      class="btn-box u-flex u-row-between fileList-sign-btn"
      v-if="taskInfo.approvalPermission"
    >
      <u-button shape="circle" type="primary" @click="gotoApproval"
        >审批</u-button
      >
    </view>
    <view class="safe-back" v-if="!taskInfo.approvalPermission"> </view>
  </view>
  <projectApplicationSkeleton v-if="loading"></projectApplicationSkeleton>
</template>
<script lang="ts" setup>
import fileList from '@/components/fileList/index.vue';
import {
  getformList,
  getPaymentRegister,
  getProjectInfo,
} from '@/api/modules/finance';
import projectApplicationSkeleton from './../components/projectApplicationSkeleton.vue';
import { onLoad } from '@dcloudio/uni-app';
import payRegisterFormInfo from './components/payRegisterFormInfo.vue';
import payCostDetail from './components/payCostDetail.vue';
import { useBack } from '@/hooks/useBack';
// swiper-item左右移动，通知tabs的滑块跟随移动
const uTabs = ref();
const transition = (e: any) => {
  let dx = e.detail.dx;
  uTabs.value.setDx(dx);
};
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
const animationfinish = (e: any) => {
  let curr = e.detail.current;
  uTabs.value.setFinishCurrent(curr);
  swiperCurrent.value = curr;
  current.value = curr;
};

const loading = ref(true);
const current = ref(0);
const swiperCurrent = ref(0);

const tabsChange = (index: number) => {
  swiperCurrent.value = index;
};
const onreachBottom = () => {};
const gotoApproval = () => {
  (uni as any).$Router.push({
    name: 'financeApproval',
    params: {
      id: payRegisterInfo.value.taskId,
      approvalInfo: {
        flowurl: 'payRegister',
        resultTypeList: [3, 2, 4],
        workflowIdByKey: 'paymentRegistId',
      },
    },
  });
};
const list = ref<any>([]);
const formInfoData = ref<any>([]);
const taskInfo = ref<any>({});
const projectInfo = ref<any>({});
// 获取详情数据
const getformListModal = async () => {
  loading.value = true;
  const requestList = [
    getformList({
      belongBusinessId: payRegisterInfo.value.taskId,
      queryFieldFlag: 1,
    }),
    getPaymentRegister({
      paymentRegistId: payRegisterInfo.value.taskId,
    }),
    getProjectInfo({
      projectId: payRegisterInfo.value.projectId,
    }),
  ];
  await Promise.all(requestList)
    .then((res) => {
      if (res[0]) {
        const data: any = res[0] || [];
        formInfoData.value = [...data].map((item) => {
          return {
            name: item.formName,
            formId: item.formId,
          };
        });
        if (data.length) {
          list.value.push({
            name: '经费入账',
          });
        }
      }
      // 任务详情
      if (res[1]) {
        taskInfo.value = res[1];
        taskInfo.value.invoiceFileShow =
          taskInfo.value.invoiceFile?.fileList.map((i: any) => {
            return {
              name: i.fileName,
              uid: i.fileId,
            };
          });
      }
      // 项目详情
      if (res[2]) {
        projectInfo.value = res[2];
      }
      list.value.push({
        name: '费用明细',
      });
      list.value.push({
        name: '文件清单',
      });
    })
    .finally(() => {
      loading.value = false;
    });
};
const payRegisterInfo = ref<any>();
onLoad(() => {
  const { data } = (uni as any).$Router.getQuery();
  payRegisterInfo.value = {
    ...data,
  };

  reloadInfo();
});
const reloadInfo = () => {
  list.value = [];
  getformListModal();
};
useBack(() => {
  reloadInfo();
});
</script>
<style lang="scss">
.swiper {
  height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
  .content-page {
    height: calc(100vh - 200rpx - env(safe-area-inset-bottom));
  }
  &.noButton {
    height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
    .content-page {
      height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
    }
  }
}
.btn-box {
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 20rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  position: fixed;
  z-index: 10;
}
.safe-back {
  position: fixed;
  z-index: 10;
  background-color: #fff;
  bottom: -env(safe-area-inset-bottom);
  width: 100%;
  height: calc(env(safe-area-inset-bottom) + 20rpx);
}
</style>
